<template>
  <div class="box">
    <h2>新增地址</h2>
    <div class="inp">
      <span>联系人</span>
      <input type="text" placeholder="姓名" v-model="name" />
    </div>
    <div class="inp">
      <span></span>
      <p>男</p>
      <p>女</p>
    </div>
    <div class="inp">
      <span>电话</span>
      <input type="text" placeholder="手机号码" v-model="phone" />
      <h4>+通讯录</h4>
    </div>
    <div class="inp">
      <span>地址</span>
      <input type="text" placeholder="选择收获地址" v-model="dizhi" />
    </div>
    <div class="inp">
      <span>门牌号</span>
      <input type="text" placeholder="例：5号楼203室" v-model="menpai" />
    </div>
    <div class="inp">
      <span>标签</span>
      <p>家</p>
      <p>学校</p>
      <p>公司</p>
    </div>
    <button @click="baocun">保存并使用</button>
  </div>
</template>

<script>
import { address_add } from "../api";
export default {
  data() {
    return {
      name: "",
      phone: "",
      dizhi: "",
      menpai: "",
    };
  },
  methods: {
    baocun() {
      address_add({
        name: this.name,
        phone: this.phone,
        地址: this.dizhi,
        menpai: this.menpai,
      }).then((res) => {
        console.log(res.data);
      });
    },
  },
};
</script>

<style scoped>
.box {
  padding: 30px;
}
.box .inp {
  margin-top: 30px;
  display: flex;
  /* justify-content: space-around; */
  height: 40px;
  align-items: center;
  border-bottom: 1px solid #ccc;
}
.box .inp input {
  flex: 1;
  height: 100%;
  outline: none;
  border: none;
}
.box .inp span {
  width: 25%;
}
.box .inp p {
  width: 50px;
  height: 20px;
  padding: 10px;
  border: 1px solid #ccc;
  margin-right: 15px;
  margin-top: -25px;
  text-align: center;
}
.box .inp h4 {
  color: blue;
}
</style>